<template>
  <!--设备类型-->
  <div style="padding: 20px">
    <el-card class="box-card">
      <el-button-group style="margin-bottom: 20px">
        <el-button @click="tjia">新增</el-button>
        <el-button @click="bian">编辑</el-button>
        <el-button @click="del">删除</el-button>
        <el-button @click="qi">启用</el-button>
        <el-button @click="ting">停用</el-button>
        <el-input placeholder="请输入设备编号或名称" v-model="typePart.typeName" clearable prefix-icon="el-icon-search"
          suffix-icon="el-icon-s-cale" style="width: 250px; margin-left: 573px" @blur="kan" />
      </el-button-group>
      <el-table :data="equipmentData" ref="table" style="width: 100%" stripe default-expand-all>
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column type="index" label="序号" width="100" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="typeName" label="设备类型名称" width="200" align="center">
        </el-table-column>
        <el-table-column prop="typeCode" label="设备类型编码" width="200" align="center">
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="100" align="center">
        </el-table-column>
        <el-table-column prop="state" label="状态" align="center">
          <template slot-scope="scope">
            {{ scope.row.state == 1 ? "启用" : "停用" }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center">
        </el-table-column>
      </el-table>
    </el-card>
    <!--新增抽屉面板-->
    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" size="35%">
      <el-card class="box-card2">
        <div slot="header" class="clearfix">
          <span> 设备状态 </span>
        </div>
        <el-form :model="form" label-width="120px" label-position="left" style="padding: 20px">
          <el-form-item label="上级类型" required>
            <el-select v-model="form.parentType" placeholder="请选择" style="width: 322px">
              <el-option label="目录" value="0"></el-option>
              <el-option :label="item.typeName" :value="item.id" v-for="item in equipmentData"
                :key="item.index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备件类型名称" required>
            <el-input v-model="form.typeName"></el-input>
          </el-form-item>
          <el-form-item label="备件类型编码" required>
            <el-input v-model="form.typeCode"></el-input>
          </el-form-item>
          <el-form-item label="排序" style="margin-left: 20px">
            <el-input v-model="form.sort"></el-input>
          </el-form-item>
          <el-form-item label="状态" style="margin-left: 20px">
            <el-radio-group v-model="form.state">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="2">停用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注" style="margin-left: 20px">
            <el-input type="textarea" v-model="form.remark" cols="10px" rows="3px"></el-input>
          </el-form-item>
          <el-form-item style="margin-left: 171px; margin-top: 92px">
            <el-button @click="handleCancel">取消</el-button>
            <el-button @click="handleSubmit">确认</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-drawer>
  </div>
</template>

<script>
import { listTypekk, InsertTypePart, UpdateTypePart } from "@/api/eastjet-maintenance/type/type";
export default {
  data() {
    return {
      form: {
        id: "",
        parentType: "",
        typeName: "",
        typeCode: "",
        sort: "",
        state: "",
        remark: "",
        tombstone: "0",
      },
      drawer: false,
      equipmentData: [],
      typePart: {
        typeName: ""
      },
      xiu: "0",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      listTypekk().then((res) => {
        this.equipmentData = res.data.data;
      });
    },
    qi() {
      const selected = this.$refs.table.selection;
      let data = [];
      selected.forEach((item) => {
        data.push(item)
      });
      data.forEach(item => {
        item.state = "1"
      })
      UpdateTypePart(data).then((res) => {
        if (parseInt(res.data.code) == 522) {
          this.getList();
          this.drawer = false;
        } else {
          this.$notify({
            title: "失败",
            message: "出现错误",
            type: "warning",
          });
        }
      })
    },
    ting() {
      const selected = this.$refs.table.selection;
      let data = [];
      selected.forEach((item) => {
        data.push(item)
      });
      data.forEach(item => {
        item.state = "2"
      })
      UpdateTypePart(data).then((res) => {
        if (parseInt(res.data.code) == 522) {
          this.getList();
          this.drawer = false;
        } else {
          this.$notify({
            title: "失败",
            message: "出现错误",
            type: "warning",
          });
        }
      })
    },
    del() {
      const selected = this.$refs.table.selection;
      let data = [];
      selected.forEach((item) => {
        data.push(item)
      });
      data.forEach(item => {
        item.tombstone = "1"
      })
      UpdateTypePart(data).then((res) => {
        if (parseInt(res.data.code) == 522) {
          this.getList();
          this.drawer = false;
        } else {
          this.$notify({
            title: "失败",
            message: "出现错误",
            type: "warning",
          });
        }
      })
    },
    tjia() {
      this.xiu = "0";
      this.form.id = ""
      this.form.parentType = ""
      this.form.typeName = ""
      this.form.typeCode = ""
      this.form.sort = ""
      this.form.state = ""
      this.form.remark = ""
      this.drawer = true;
    },
    //修改
    bian() {
      this.xiu = "1";
      const selected = this.$refs.table.selection;
      if (selected.length == 0) {
        return;
      }
      this.form.id = selected[0].id
      this.form.parentType = selected[0].parentType
      this.form.typeName = selected[0].typeName
      this.form.typeCode = selected[0].typeCode
      this.form.sort = selected[0].sort
      this.form.state = selected[0].state
      this.form.remark = selected[0].remark
      this.drawer = true;
    },
    //搜索
    kan() {
      alert(1)
      listTypekk(this.typePart).then((res) => {
        this.equipmentData = res.data.data;
      });
    },
    handleCancel() {
      // 处理取消
      this.drawer = false;
    },
    handleSubmit() {
      if (this.xiu == "1") {
        let data = [{ ...this.form }]
        UpdateTypePart(data).then((res) => {
          if (parseInt(res.data.code) == 522) {
            this.getList();
            this.drawer = false;
          } else {
            this.$notify({
              title: "失败",
              message: "出现错误",
              type: "warning",
            });
          }
        })
      } else {
        // 处理提交
        InsertTypePart(this.form).then((res) => {
          if (parseInt(res.data.code) == 520) {
            this.getList();
            this.drawer = false;
          } else {
            this.$notify({
              title: "失败",
              message: "出现错误",
              type: "warning",
            });
          }
        });
      }
    },
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 1210px;
  height: 660px;
  margin-left: 14px;
}

.box-card2 {
  width: 526px;
  height: 749px;
  margin-left: 2px;
}
</style>
